<!--
 * @Author: your name
 * @Date: 2021-08-02 00:57:28
 * @LastEditTime: 2021-09-07 17:53:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \aircityinit\src\components\tagpages\tagepage.vue
-->
<template>
  <div class="TagePageModel1">
    <div class="box">
      <div class="top">
        <div class="top_left">
          <img src="../../../assets/images/img.webp" alt="" />
        </div>
        <div class="top_right">
          <div class="title">
            <span>
              刘小超
            </span>
            <span>执法人员</span>
          </div>
          <div class="info">
            <p>
              <span>
                性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别：
              </span>
              <span>
                女
              </span>
            </p>
            <p>
              <span>
                年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;龄：
              </span>
              <span>
                28岁
              </span>
            </p>
            <p>
              <span>
                籍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;贯：
              </span>
              <span>
                广东广州
              </span>
            </p>
            <p>
              <span>
                岗&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;位：
              </span>
              <span>
                广州塔景区
              </span>
            </p>
            <p>
              <span>
                上报事件：
              </span>
              <span>
                6件
              </span>
            </p>
          </div>
        </div>
      </div>
      <div class="bottom">
        <div @click="buttonclick" class="button">联合会商</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: 1,
    };
  },
  computed: {},
  watch: {},
  methods: {
    buttonclick() {
      this.$router.push("/tagpage/model2");
    },
    init() {
      let ws = new WebSocket("ws://192.168.5.169:81");
      console.log(ws);
      ws.onopen = () => {
        ws.send(
          JSON.stringify({
            command: -1,
          })
        );
      };

      ws.onmessage = (e) => {
        console.log(e);
      };
      let log = () => {};
      //onReady
      let _onReady = () => {};
      //onEvent
      let _onEvent = (e) => {};
      let apiOptions = {
        onReady: _onReady,
        // onApiVersion: _onApiVersion,
        onEvent: _onEvent,
        onLog: log,
        useColorLog: false, //仅用于SDK测试页面，二次开发请设置为false
      };
      let aircityApi = new AirCityAPI("192.168.5.169:4322", apiOptions);
      console.log(aircityApi);
    },
    async click() {
      // await __g.camera.set(
      //   -343.636719,
      //   -2139.289307,
      //   2352.374268,
      //   -42.703823,
      //   -51.868988,
      //   2
      // );
      console.log(__g.webSocket);
      let o = {
        a: 1,
      };
      __g.webSocket.onmessage(JSON.stringify(o));
    },
  },
  created() {
    window.addEventListener("load", this.init);
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
  components: {},
};
</script>

<style lang="scss">
.TagePageModel1 {
  width: 100%;
  height: 100%;
  background: rgb(0, 0, 0);
  background-size: 100% 100%;
  position: absolute;

  .box {
    width: 100%;
    height: 100%;
    border-radius: 10%;
    padding: 5%;
    background: rgba(0, 0, 0, 0.5);
    .top {
      height: 80%;
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .top_left {
        width: 40%;
        height: 100%;
        margin: 20px;
        /* background: url("../../../assets/images/img.webp") no-repeat */
        /* center/cover; */
        background-size: 100%;
        img {
          width: 100%;
        }
      }
      .top_right {
        width: 55%;
        height: 100%;
        padding: 5%;
        margin-right: 10px;
        .title {
          margin-bottom: 5px;
          span:nth-of-type(1) {
            font-size: 18px;
          }
          span:nth-of-type(2) {
            height: 20px;
            padding: 5px;
            display: inline-block;
            border-radius: 20px 20px 20px 20px;
            line-height: 10px;
            font-size: 12px;
            background: rgb(16, 88, 73);
          }
        }
        .info {
          > p {
            font-size: 12px;
            margin: 6px 0;
            span:nth-of-type(1) {
              width: 50%;
              color: rgb(187, 187, 187);
              display: inline-block;
              text-align: right;
            }
          }
        }
      }
    }
    .bottom {
      height: 20%;
      .button {
        width: 100%;
        height: 80%;
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 14px;
        background: rgb(16, 107, 110);
      }
    }
  }
}
</style>
